<template>
  <div class="home_box">
    <!-- 6% -->
    <el-row class="up">
      <el-col :offset="1" :span="2">
        <el-button type="text" @click="openGoodDraw">发布二手商品</el-button>
      </el-col>
      <el-col :span="2">
        <el-button type="text" @click="openRoomDraw">发布出租房屋</el-button>
      </el-col>
      <el-col :span="2" :offset="15">
        <el-button type="text" @click="toBackRoute">个人中心</el-button>
      </el-col>
      <el-col :span="2">
        <el-button type="text" @click="logout">退出登录</el-button>
      </el-col>
    </el-row>

    <!-- 88% -->
    <el-row class="mid_row">
      <el-col class="mid_col">
        <router-view></router-view>
      </el-col>
    </el-row>

    <!-- 5% -->
    <el-row class="down">
      <el-col :span="4" :offset="10"> 联系我：2294422096@qq.com </el-col>
    </el-row>

    <!-- 发布二手商品、房屋的drawer -->
    <AddGood ref="goodDrawer" />
    <AddRoom ref="roomDrawer" />
  </div>
</template>

<script>
import axios from "@/request";
import AddGood from "@/components/AddGood.vue";
import AddRoom from "@/components/AddRoom.vue";

export default {
  name: "Home",
  components: {
    AddGood,
    AddRoom,
  },
  computed: {
    user() {
      return this.$store.state.user.info;
    },
  },
  methods: {
    toBackRoute() {
      this.$router.push({ name: "back" });
    },
    logout() {
      axios
        .get("/auth/logout")
        .then((res) => {
          if (res.data.code == 200) {
            sessionStorage.clear();
            this.$message({
              message: "退出成功!",
              type: "success",
            });
          } else {
            alert(res.data.data);
          }
          this.$router.push({ name: "login" });
        })
        .catch((e) => {});
    },
    openGoodDraw() {
      this.$refs.goodDrawer.openDraw();
    },
    openRoomDraw() {
      this.$refs.roomDrawer.openDraw();
    },
  },
};
</script>


<style scoped>
.home_box {
  height: 100%;
}

.up {
  height: 6%;
  box-shadow: 0 6px 4px rgba(0, 0, 0, 0.12);
  align-items: center;
  display: flex;
}

.mid_row {
  height: calc(89% - 2px);
  margin-top: 2px;
  overflow: hidden;
  background-color: rgb(240, 240, 240);
}

.mid_col {
  height: 100%;
}

.down {
  height: 5%;
  background-color: #f2f6fc;
  text-align: center;
  display: flex;
  align-items: center;
}
</style>
